<template>
	<view>
		<view class="tishi-box-err">
			<view class="header">
				<u-icon name="close-circle-fill" color="#D40220"></u-icon>
				<span class="tishi-text">审核驳回</span>
			</view>
			<view class="text">抱歉，您申请的个人疗休养信息申请未通过，请重新修改后提交。</view>
			<view class="text">驳回原因:我是驳回原因，我是驳回原因，我是驳回原因，我是驳回原因，我是驳回原因。</view>
		</view>
		{{JSON.stringify(formData)}}
		<base-form :formColumn="formColumn" v-model="formData" :rules="rules" ref="form">
			
			<template #title>
				<view class="info">
					<view class="info-des">
						<view class="left">开票信息</view>
						<view class="right">请填写单位开票信息</view>
					</view>
				</view>
			</template>
			
			<template #telBtton>
				<view class="tel-btn" @click="getCode">
					获取验证码
				</view>
			</template>
		</base-form>
		
		<view class="btn-box">
			<u-button text="提交" shape="circle" type="primary" color="linear-gradient(to right, #93DCB4, #5CB87F)"
			 @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formColumn:[
					
				
					{
						label:'单位名称',
						key:'unitName',
						type:'text',
						required:true,
						placeholder:'请输入单位名称',
					},
					{
						label:'单位地址',
						key:'unitAd',
						type:'text',
						required:true,
						placeholder:'请输入单位地址',
					},
					{
						label:'管理员职务',
						key:'admin',
						type:'text',
						required:true,
						placeholder:'请输入管理员职务',
					},
					{
						label:'管理员姓名',
						key:'name',
						type:'text',
						required:true,
						placeholder:'请输入管理员姓名',
					},
					{
						label:'手机号',
						key:'tel',
						type:'text',
						required:true,
						slot:'telBtton',
						placeholder:'请输入手机号',
					},
					{
						label:'验证码',
						key:'code',
						type:'text',
						required:true,
						placeholder:'请输入验证码',
					},
					{
						label:'单位疗休养职工人数',
						key:'num',
						type:'text',
						required:true,
						placeholder:'请输入单位疗休养职工人数',
						unit:'人'
					},
					{
						key:'title',
						type:'slot',
					},
					{
						label:'单位名称',
						key:'unitName',
						type:'text',
						required:true,
						placeholder:'请输入单位名称',
					},
					{
						label:'统一社会信用代码',
						key:'unitCode',
						type:'text',
						required:true,
						placeholder:'请输入统一社会信用代码',
					},
					{
						label:'开户行',
						key:'brank',
						type:'text',
						required:true,
						placeholder:'请输入开户行',
					},
					{
						label:'账号',
						key:'userNo',
						type:'text',
						required:true,
						placeholder:'请输入账号',
					},
					{
						label:'地址',
						key:'add',
						type:'text',
						required:true,
						placeholder:'请输入地址',
					},
					{
						label:'电话',
						key:'tel2',
						type:'text',
						required:true,
						placeholder:'请输入电话',
					},
					
					
					
				],
				formData:{
					
					unitName:'',
					unitAd:'',
					admin:'',
					name:'',
					tel:'',
					code:'',
					num:'',
					unitCode:'',
					brank:'',
					userNo:'',
					add:'',
					tel2:'',

					

				},
				rules:{
					
					'unitName': {
						type: 'string',
						required: true,
						message: '请输入单位名称',
						trigger: ['blur', 'change']
					},
					'unitAd': {
						type: 'string',
						required: true,
						message: '请输入单位地址',
						trigger: ['blur', 'change']
					},
					'admin': {
						type: 'string',
						required: true,
						message: '请输入管理员职务',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请输入管理员姓名',
						trigger: ['blur', 'change']
					},
					'tel': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					'num': {
						type: 'string',
						required: true,
						message: '请输入单位疗休养职工人数',
						trigger: ['blur', 'change']
					},
					'unitCode': {
						type: 'string',
						required: true,
						message: '请输入统一社会信用代码',
						trigger: ['blur', 'change']
					},
					'brank': {
						type: 'string',
						required: true,
						message: '请输入开户行',
						trigger: ['blur', 'change']
					},
					'userNo': {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					'add': {
						type: 'string',
						required: true,
						message: '请输入地址',
						trigger: ['blur', 'change']
					},
					'tel2': {
						type: 'string',
						required: true,
						message: '请输入电话',
						trigger: ['blur', 'change']
					},
					
					
					
				}
			}
		},
		async onLoad() {
		

		},
		methods: {
			async submit(){
				const res = await this.$refs['form'].validate()
				console.log(res)
			},
			getCode(){
				console.log('获取验证码')
			}
		}
	}
</script>

<style lang="less">
	.tishi-box-err{
		padding: 40rpx 30rpx;
		background-color: #FFF2E2;
		.tishi-text{
			margin-left: 10rpx;
			font-size: 30rpx;
			color: #D40220
		}
		.header{
			display: flex;
			align-items: center;
		}
		.text{
			margin-left: 42rpx;
			margin-top: 10rpx;
			font-size: 30rpx;
			color: #666666
		}
	}
	page{
		background-color: #F4F4F4;
	}
	.info{
		padding-top: 30rpx;
		background-color: #F4F4F4;
		border-bottom: 1px solid #d6d7d9;
		.info-des{
			display: flex;
			padding: 30rpx 40rpx;
			background-color: #fff;
			.left{
				color: #333333;
				font-weight: 600;
			}
			.right{
				margin-left: 18rpx;
				font-size: 28rpx;
				color: #6D6D6D;
			}
		}
	}
	.tel-btn{
		color: #61BA83;
	}
	.btn-box{
		margin-top: 80rpx;
		padding: 40rpx;
	}
</style>
